<template>
  <div class="content">
    <!-- 查询条件 -->
    <QueryCondition @queryParams="queryParams"></QueryCondition>
    <div class="list-content">
      <div class="public-title">
        <div class="title-fl">列表</div>
      </div>
      <el-table :data="tableData" :height="tableHeight" v-loading="loading" :header-cell-style="{fontWeight:'500'}">
        <el-table-column type="selection" width="45" ali="center"></el-table-column>
        <el-table-column type="index" :index="typeIndex" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="handle" label="操作" width="150">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="'查看'"
              placement="top"
            >
              <i
                class="iconfont icchakan1"
                style="color: #0098ff"
                @click="onView(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="'督办详情'"
              placement="top"
            >
              <i
                class="iconfont icdubankaobei"
                style="color: #0098ff"
                @click="showUrgeDetail(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="'取消督办'"
              placement="top"
            >
              <i
                class="iconfont ichuituixiangqing"
                style="color: #0098ff"
                @click="cancelUrge(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="xmmc" min-width="150" label="项目名称"></el-table-column>
        <el-table-column prop="sxmc" label="事项名称"></el-table-column>
        <el-table-column prop="mqblhj" label="目前办理环节"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="sqdw" label="申请单位"></el-table-column>
        <el-table-column prop="sqr" label="申请人"></el-table-column>
        <el-table-column prop="creatTime" label="申请时间">
          <template slot-scope="scope">
            <p>{{scope.row.creatTime}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="sqr" label="督办人"></el-table-column>
        <el-table-column prop="sqr" label="督办时间"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          v-if="total>0"
          background
          :page-sizes="[20, 30, 50]"
          :page-size="parameter.rows"
          layout="total, sizes, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <DetailDialog :detailVisible="detailVisible" title="督办" @close="detailVisible = false"></DetailDialog>
  </div>
</template>
<script>
import {
  getYbxList,
} from "@/api/businessApproval";
import DetailDialog from "../components/detailDialog";
import QueryCondition from "../components/queryCondition";
const fixHeight = 340;
export default {
  name: "name",
  components: { DetailDialog, QueryCondition },
  data() {
    return {
      loading: false,
      tableHeight: window.innerHeight - fixHeight, //表格高度
      total: 0,
      timer: false,
      detailVisible: false,
      parameter: {
        rows: 20,
        page: 1,
      },
      tableData: [
        {
          typeIndex: 1,
          xmmc: 'dddd'
        }
      ]
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.tableHeight = window.innerHeight - fixHeight;
      })();
    };
    this.queryList();
  },
  watch: {
    tableHeight(val) {
      if (!this.timer) {
        this.tableHeight = val;
        this.timer = true;
        const that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  },
  methods: {
    // 查询组件传出来的查询参数
    queryParams(val) {
      Object.assign(this.parameter, val);
      this.queryList();
    },
    typeIndex(index) {
      //处理分页数据的 index
      return (this.parameter.page - 1) * this.parameter.rows + index + 1;
    },
    //查询
    queryList() {
      this.loading = true;
      getYbxList(this.parameter).then(res => {
        this.loading = false;
        const data = res.data;
        this.total = data.result.total;
        this.tableData = data.result.records;
        this.total = 1;
        this.tableData = [
          {
            creatTime: '2021',
            xmmc: '假数据， 接口吐出来的没数据'
          }
        ]
      })
      .catch(() => {
        this.loading = false;
      })
    },
    //分页
    handleCurrentChange(val) {
      this.parameter.page = val;
      this.queryList();
    },
    //分页
    handleSizeChange(val) {
      this.parameter.rows = val;
      this.queryList();
    },
    onView(data) {
      this.$router.push('/ywsp');
    },
    showUrgeDetail() {
      this.detailVisible = true;
    },
    cancelUrge() {
      this.$confirm('确定取消督办?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消成功!'
        });
      }).catch(() => {        
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.list-content {
  margin: 16px 0;
  padding: 12px 0;
  background: #fff;
  box-sizing: border-box;
}
/deep/ .el-pagination__total {
  float: left;
  margin-left: 10px;
}
.iconfont {
  color: #3385ff;
}
.iconfontdbot {
  margin-left: 18px;
}
.page {
  text-align: right;
  margin-top: 10px;
  position: relative;
  .Tips {
    position: absolute;
    left: 100px;
    top: 8px;
    span {
      color: #7c8195;
      font-size: 12px;
      margin: 0px 10px;
    }
  }
}
</style>
